<template>
	
	<div>
		<el-dialog title="新增修改下级" :visible.sync="dialogTableVisible4" >
		  <el-row>
			  <el-col :span="6">下级名称</el-col>
			  <el-col :span="6">所属上级</el-col>
			  <el-col :span="6">所属级别</el-col>
			  <el-col :span="6">是否使用</el-col>
			  
		  </el-row>
		  <el-row>
			  <el-col :span="6">
				  <el-input v-model="smallJuniorParam.sortName" placeholder="下级名称"></el-input>
			  </el-col>
			  <el-col :span="6">
				  <el-input v-model="smallJuniorParam.shoppingName" placeholder="上级名称" disabled></el-input>
			  </el-col>
			  <el-col :span="6">
				  <el-input v-model="smallJuniorParam.sortGrade" disabled></el-input>
			  </el-col>
			  <el-col :span="6">
				  <el-radio-group v-model="smallJuniorParam.sortStatus" >
				          <el-radio label="使用">显示</el-radio>
				          <el-radio label="停用">不显示</el-radio>
				        </el-radio-group>
			  </el-col>
		  </el-row>
		  <div slot="footer" class="dialog-footer">
		      <el-button type="primary" @click="operation()">提交</el-button>
		    </div>
		</el-dialog>
		
		
		
		
		
		<el-dialog title="下级目录" :visible.sync="dialogTableVisible3">
			<el-row>
			  <el-col :span="8">
				<el-input v-model="getSmallJuniorParam.sortName" placeholder="输入名称查询"></el-input>
			  </el-col>
			  <el-col :span="16">
				  <el-button type="info" plain @click="getSmallJuniorBy()">点击查询</el-button>
				  <el-button type="info" plain @click="openAddJunior()">新增下级</el-button>
				  <el-button type="info" plain v-if="multipleSelection1.length==1" @click="openUpdateJunior()">修改下级</el-button>
				  <el-button type="info" plain v-else @click="openUpdateJunior()" disabled="">修改下级</el-button>
				  <el-button type="info" plain v-if="multipleSelection1.length!=0" @click="delSmallJunior()">删除下级</el-button>
				  <el-button type="info" plain v-else @click="delSmallJunior()" disabled="">删除下级</el-button>
			  </el-col>
			</el-row>
		  <el-table :data="smallJunior" @selection-change="handleSelectionChange1" :row-style="rowStyle">
			<el-table-column type="selection" width="55"></el-table-column>
		    <el-table-column property="sortName" label="下级名称" width="150"></el-table-column>
		    <el-table-column property="shoppingId" label="所属上级" width="150" :formatter="forJunior"></el-table-column>
		    <el-table-column property="sortGrade" label="级别" width="150"></el-table-column>
			<el-table-column property="sortStatus" label="显示" width="150"></el-table-column>
		  </el-table>
		  
		  <div>
		  	<el-pagination background layout="prev, pager, next" :total="juniortotle" :page-size="5" :current-page="currentPageJunior" @current-change="juniorcode">
		  	</el-pagination>
		  </div>
		</el-dialog>
		
		
		<el-dialog title="新增下级组" :visible.sync="dialogTableVisible2" @close="cleanJunior">
		  <el-row>
			  <el-col :span="6">下级名称</el-col>
			  <el-col :span="6">所属上级</el-col>
			  <el-col :span="5">所属级别</el-col>
			  <el-col :span="4">是否使用</el-col>
			  <el-col :span="3">操作</el-col>
		  </el-row>
		  <el-row v-for="(ji,index) in juniorParam.junior">
			  <el-col :span="6">
				  <el-input v-model="ji.sortName" placeholder="下级名称"></el-input>
			  </el-col>
			  <el-col :span="6">
				  <el-input v-model="ji.shoppingName" placeholder="上级名称" disabled></el-input>
			  </el-col>
			  <el-col :span="5">
				  <el-input v-model="ji.sortGrade" disabled></el-input>
			  </el-col>
			  <el-col :span="4">
				  <el-radio-group v-model="ji.sortStatus" >
				          <el-radio label="使用">显示</el-radio>
				          <el-radio label="停用">不显示</el-radio>
				        </el-radio-group>
			  </el-col>
			  <el-col :span="3">
				  <el-button type="text" @click="delJunior(index)">删除</el-button>
			  </el-col>
		  </el-row>
		  <el-button type="text" @click="addJuior()">新增</el-button>
		  <div slot="footer" class="dialog-footer">
		      <el-button type="primary" @click="addSmallJuior()">确 定</el-button>
		    </div>
		</el-dialog>
		
		
		
		
		
		
		
		
		
		<el-dialog title="修改小类" :visible.sync="dialogFormVisible1" @close="cleanSort()">
		  <el-form :model="updateBigSortParam">
		    <el-form-item label="小类名称" :label-width="formLabelWidth">
		      <el-input v-model="updateBigSortParam.sortName" autocomplete="off" ></el-input>
		    </el-form-item>
		    <el-form-item label="小类描述" :label-width="formLabelWidth">
		      <el-input v-model="updateBigSortParam.sortNote" autocomplete="off" ></el-input>
		    </el-form-item>
		    <el-select v-model="updateBigSortParam.shoppingId">
		      <el-option
		        v-for="bigSort in bigSorts"
		        :key="bigSort.sortId"
		        :label="bigSort.sortName"
		        :value="bigSort.sortId">
		      </el-option>
		    </el-select>
		    <el-radio-group v-model="updateBigSortParam.sortStatus">
		          <el-radio label="使用">显示</el-radio>
		          <el-radio label="停用">不显示</el-radio>
		        </el-radio-group>
			<div>
				<span>预留文件上传区</span>
				<el-upload
				  class="upload-demo"
				  action="http://localhost:81/file/upload"
				  name="file"
				  :on-success="filesucess"
				  list-type="picture"
				  ref='upload'
				  >
				  <el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</div>
			<el-row>
				<el-col>鉴定图定义</el-col>
			</el-row>
			<div v-for="(shopDefine,index) in shopDefines">
				<el-row>
					<el-col :span="8">
						<el-input v-model="shopDefines[index].defineName"></el-input>
					</el-col>
					<el-col :span="8">
						<el-select v-model="shopDefines[index].defineStatus">
						  <el-option
						    v-for="item in options"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
					</el-col>
					<el-col :span="8">
						<el-button type="text" @click="delDefineUpdate(index)">删除</el-button>
					</el-col>
				</el-row>
			</div>
			<el-button type="text" @click="addDefineUpdate()">新增</el-button>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="updateBigSort()">确 定</el-button>
		  </div>
		</el-dialog>
		
		
		<el-dialog title="新增小类" :visible.sync="dialogFormVisible" @close="cleanSort()">
		  <el-form :model="addBigSortParam">
		    <el-form-item label="小类名称" :label-width="formLabelWidth">
		      <el-input v-model="addBigSortParam.sortName" autocomplete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="小类描述" :label-width="formLabelWidth">
		      <el-input v-model="addBigSortParam.sortNote" autocomplete="off"></el-input>
		    </el-form-item>
			<el-select v-model="addBigSortParam.shoppingId" placeholder="请选择">
			  <el-option
			    v-for="bigSort in bigSorts"
			    :key="bigSort.sortId"
			    :label="bigSort.sortName"
			    :value="bigSort.sortId">
			  </el-option>
			</el-select>
			<el-radio-group v-model="addBigSortParam.sortStatus">
			      <el-radio label="使用">显示</el-radio>
			      <el-radio label="停用">不显示</el-radio>
			    </el-radio-group>
			<div>
				<span>预留文件上传区</span>
				<el-upload
				  class="upload-demo"
				  action="http://localhost:80/file/upload"
				  name="file"
				  :on-success="filesucess"
				  list-type="picture"
				  ref='upload'
				  >
				  <el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</div>
			<el-row>
				<el-col>鉴定图定义</el-col>
			</el-row>
			<div v-for="(shopDefine,index) in shopDefines">
				<el-row>
					<el-col :span="8">
						<el-input v-model="shopDefines[index].defineName"></el-input>
					</el-col>
					<el-col :span="8">
						<el-select v-model="shopDefines[index].defineStatus">
						  <el-option
						    v-for="item in options"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
					</el-col>
					<el-col :span="8">
						<el-button type="text" @click="delDefine(index)">删除</el-button>
					</el-col>
				</el-row>
			</div>
			<el-button type="text" @click="addDefine()">新增</el-button>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="addBigSort()">确 定</el-button>
		  </div>
		</el-dialog>
		
		<el-row>
			<el-col :span="8">
				<span style="color: #FFFFFF;">占位</span>
			</el-col>
			<el-col :span="5">
				<el-tag type="info">选择大类</el-tag>
			</el-col>
			<el-col :span="11"><el-tag type="info">模糊查询</el-tag></el-col>
		</el-row>
		
		<el-row>
		  <el-col :span="8">
			<i class="el-icon-search" style="margin-left: 5px;;">筛选查询</i>
		  </el-col>
		  <el-col :span="4">
			  <el-select v-model="getSmallSortParam.sortId" placeholder="请选择">
			    <el-option
			      v-for="bigSort in bigSorts"
			      :key="bigSort.sortId"
			      :label="bigSort.sortName"
			      :value="bigSort.sortId">
			    </el-option>
			  </el-select>
		  </el-col>
		  <el-col :span="1"><span style="color: #FFFFFF;">占位</span></el-col>
		  <el-col :span="6">
			  <el-input v-model="getSmallSortParam.sortName" placeholder="请输入商品小类名称查询"></el-input>
		  </el-col>
		  <el-col :span="1"><span style="color: #FFFFFF;">占位</span></el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="getSmallSortBy()">点击查询</el-button>
		  </el-col>
		</el-row>
		<el-divider></el-divider>
		
		
		<el-row>
		  <el-col :span="12">
			<i class="el-icon-postcard">操作</i>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="openadd()">新增小类</el-button>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="openupdate()" v-if="multipleSelection.length==1">修改小类</el-button>
			  <el-button type="info" plain @click="openupdate()" v-else disabled="">修改小类</el-button>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="info" plain @click="delsmall()" v-if="multipleSelection.length!=0">删除小类</el-button>
			  <el-button type="info" plain @click="delsmall()" v-else disabled="">删除小类</el-button>
		  </el-col>
		</el-row>
		
		
		<el-table ref="multipleTable" :data="smallSorts" :row-style="rowStyle" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
		    <el-table-column type="selection" width="55">
		    </el-table-column>
		    <el-table-column prop="sortId" label="小类号" width="140">
		    </el-table-column>
		    <el-table-column prop="sortName" label="小类名称" width="140">
		    </el-table-column>
			<el-table-column prop="shoppingId" label="所属大类" width="140" :formatter="forcode">
			</el-table-column>
			<el-table-column prop="sortGrade" label="级别" width="140">
			</el-table-column>
			<el-table-column prop="sortStatus" label="显示" width="140">
			</el-table-column>
			<el-table-column prop="address" label="操作">
					 <template slot-scope="scope">
					       <el-button type="text" size="mini" v-if="scope.row.sortStatus=='使用'" @click="openJunior(scope.row)">新增下级</el-button>
						   <el-button type="text" size="mini" v-else @click="openJunior(scope.row)" disabled="">新增下级</el-button>
						   <el-button type="text" size="mini" v-if="scope.row.sortStatus=='使用'" @click="openSmallJunior(scope.row)">查看下级</el-button>
						   <el-button type="text" size="mini" v-else @click="openSmallJunior(scope.row)" disabled="">查看下级</el-button>
					 </template>
			</el-table-column>
		  </el-table>
		  
		  <div>
		  	<el-pagination background layout="prev, pager, next" :total="manytotle" :current-page="currentPage" :page-size="5" @current-change="manycode">
		  	</el-pagination>
		  </div>
		
		
		
	</div>
	
</template>

<script>
	
	export default {
		name: "smallSort",
		data(){
			return{
				currentPageJunior: 1,
				currentPage: 1,
				smallJunior: [],
				getSmallJuniorParam: {
					pageParam: {
						indexPage: 1,
						size: 5
					},
					sortName: null,
					sortId: null
				},
				juniorParam:{
					junior: [
						{
							sortId: null,
							sortName:"请输入名称",
							sortImg: null,
							sortStatus: null,
							sortGrade: "三级",
							shoppingId: null,
							shoppingName: null
						}
					],
					sortId: null,
					sortName: null
				},
				
				smallSorts: [],
				multipleSelection: [],
				multipleSelection1: [],
				getSmallSortParam: {
					pageParam: {
						indexPage: 1,
						size: 5
					},
					sortId: null,
					sortName: null
				},
				bigSorts: [],
				getBigSortParam: {
					pageParam: {},
					sortName: null
				},
				addBigSortParam: {
					sortGrade: "二级",
					sortStatus: null,
					sortName: null,
					sortNote: null,
					sortImg: null,
					shoppingId: null,
					defines: []
				},
				shopDefines: [],
				updateBigSortParam: {
					sortId: null,
					sortName: null,
					sortNote: null,
					sortImg: null,
					sortStatus: null,
					shoppingId: null,
					defines: []
				},
				dialogFormVisible: false,
				dialogFormVisible1: false,
				dialogTableVisible2: false,
				dialogTableVisible3: false,
				dialogTableVisible4: false,
				sortId: 0,
				smallSortData: [],
				options: [{
				          value: 0,
				          label: '必选'
				        },
						{
						  value: 1,
						  label: '可选'
						}],
				formLabelWidth: '120px',
				manytotle: 0,
				smallJuniorParam: {
							sortId: null,
							sortName:"请输入名称",
							sortImg: null,
							sortStatus: null,
							sortGrade: "三级",
							shoppingId: null,
							shoppingName: null
						},
				singleJunior: [],
				juniortotle: 0
				
			}
		},
		methods:{
			getSmallJuniorBy(){
				this.getSmallJuniorParam.pageParam.indexPage=1;
				this.getSmallJunior();
			},
			getSmallSortBy(){
				this.getSmallSortParam.pageParam.indexPage=1;
				this.getSmallSort();
			},
			rowStyle({row, rowIndex}){
				let stylejson={}
				if(row.sortStatus=='停用'){
					stylejson.color='grey'
					return stylejson
				}else{
					stylejson.color='black'
					return stylejson
				}
			},
			juniorcode(index){
				this.getSmallJuniorParam.pageParam.indexPage=index;
				this.getSmallJunior();
			},
			cleanSort(){
				this.$refs.upload.clearFiles();
				this.$http.delete("/pawnbackgroundsystem/shopdefine/delTimeDefine").then(resp=>{
				})
			},
			cleanJunior(){
				this.juniorParam.junior=[
											{
												sortId: null,
												sortName:"请输入名称",
												sortImg: null,
												sortStatus: null,
												sortGrade: "三级",
												shoppingId: null,
												shoppingName: null
											}
										]
			},
			forJunior(row){
				for(var b=0;b<this.smallSorts.length;b++){
					if(row.shoppingId==this.smallSorts[b].sortId){
						return this.smallSorts[b].sortName;
					}
				}
			},
			forcode(row){
				for(var a=0;a<this.bigSorts.length;a++){
					if(row.shoppingId==this.bigSorts[a].sortId){
						return this.bigSorts[a].sortName;
					}
				}
			},
			openUpdateJunior(){
				this.smallJuniorParam.sortId=this.singleJunior[0].sortId;
				this.smallJuniorParam.sortName=this.singleJunior[0].sortName;
				this.smallJuniorParam.sortStatus=this.singleJunior[0].sortStatus;
				this.dialogTableVisible4=true;
			},
			operation(){
				this.$http.post("/pawnbackgroundsystem/sort/smallJunior",this.smallJuniorParam).then(resp=>{
					this.dialogTableVisible4=false;
					this.smallJuniorParam={
											sortId: null,
											sortName:"请输入名称",
											sortImg: null,
											sortStatus: null,
											sortGrade: "三级",
											shoppingId: null,
											shoppingName: null
										};
					this.getSmallJunior();
				})
			},
			openAddJunior(){
				this.dialogTableVisible4=true;
			},
			delSmallJunior(){
				this.getSmallJuniorParam.pageParam.indexPage=1;
				this.$http.delete("/pawnbackgroundsystem/sort/delSmallJunior?intList="+this.multipleSelection1).then(resp=>{
					this.getSmallJunior();
				})
			},
			openSmallJunior(row){
				this.smallJuniorParam.shoppingId=row.sortId;
				this.smallJuniorParam.shoppingName=row.sortName;
				this.getSmallJuniorParam.sortId=row.sortId;
				this.getSmallJunior();
				this.dialogTableVisible3=true
			},
			getSmallJunior(){
				this.$http.post("/pawnbackgroundsystem/sort/getSmallJunior",this.getSmallJuniorParam).then(resp=>{
					this.smallJunior=resp.data.data.ls;
					this.currentPageJunior=resp.data.data.indexPage;
					this.juniortotle=resp.data.data.totle
				})
			},
			delJunior(index){
				this.juniorParam.junior.splice(index,1);
			},
			addSmallJuior(){
				this.$http.post("/pawnbackgroundsystem/sort/addSmallJunior",this.juniorParam).then(resp=>{
					this.dialogTableVisible2=false;
					this.sortId=null;
					this.sortName=null;
				})
			},
			addJuior(){
				this.juniorParam.junior.push(
					{
						sortId: null,
						sortName:"请输入名称",
						sortImg: null,
						sortStatus: null,
						sortGrade: "三级",
						shoppingId: null,
						shoppingName: null
					}
				);
				for(var i=0;i<this.juniorParam.junior.length;i++){
					this.juniorParam.junior[i].shoppingId=this.juniorParam.sortId;
					this.juniorParam.junior[i].shoppingName=this.juniorParam.sortName;
				}
			},
			openJunior(row){
				this.juniorParam.sortId=row.sortId;
				this.juniorParam.sortName=row.sortName;
				for(var i=0;i<this.juniorParam.junior.length;i++){
					this.juniorParam.junior[i].shoppingId=this.juniorParam.sortId;
					this.juniorParam.junior[i].shoppingName=this.juniorParam.sortName;
				}
				this.dialogTableVisible2=true
			},
			manycode(index){
				this.getSmallSortParam.pageParam.indexPage=index;
				this.getSmallSort();
			},
			delsmall(){
				this.getSmallSortParam.pageParam.indexPage=1;
				this.$http.delete("/pawnbackgroundsystem/sort/delSmallSort?intList="+this.multipleSelection).then(resp=>{
					this.getSmallSort();
					this.multipleSelection=[];
				})
			},
			updateBigSort(){
				this.updateBigSortParam.defines=this.shopDefines;
				this.$http.put("/pawnbackgroundsystem/sort/updateBigSort",this.updateBigSortParam).then(resp=>{
					this.dialogFormVisible1=false;
					this.sortId=0;
					this.updateBigSortParam={
											sortId: null,
											sortName: null,
											sortNote: null,
											sortImg: null,
											sortStatus: null,
											shoppingId: null,
											defines: []
										};
					this.smallSortData=[];
					this.getSmallSort();
				})
			},
			openupdate(){
				this.sortId=this.multipleSelection[0]
				this.updateBigSortParam.sortId=this.sortId
				this.updateBigSortParam.sortName=this.smallSortData[0].sortName
				this.updateBigSortParam.sortNote=this.smallSortData[0].sortNote
				this.updateBigSortParam.sortImg=this.smallSortData[0].sortImg
				this.updateBigSortParam.shoppingId=this.smallSortData[0].shoppingId
				this.updateBigSortParam.sortStatus=this.smallSortData[0].sortStatus
				this.getShopDefine();
				this.dialogFormVisible1=true;
			},
			addDefineUpdate(){
				this.shopDefines.push({
					defineId: null,
					defineName: "正面",
					defineStatus: 0,
					sortId: this.sortId,
					rawAddTime: null,
					rawUpdateTime: null
				})
				console.log(this.shopDefines)
			},
			delDefineUpdate(index){
				this.defineId=(this.shopDefines[index]).defineId;
				console.log(this.shopDefines[index])
				this.shopDefines.splice(index,1);
				console.log(this.defineId)
				this.$http.delete("/pawnbackgroundsystem/shopdefine/delShopDefine?defineId="+this.defineId).then(resp=>{
					
				})
			},
			getShopDefine(){
				this.$http.get("/pawnbackgroundsystem/shopdefine/getShopDefine?sortId="+this.sortId).then(resp=>{
					console.log(resp)
					this.shopDefines=resp.data.data
				})
			},
			openadd(){
				this.getShopDefine();
				this.dialogFormVisible=true
			},
			addBigSort(){
				this.addBigSortParam.defines=this.shopDefines;
				this.$http.post("/pawnbackgroundsystem/sort/addBigSort",this.addBigSortParam).then(resp=>{
					this.dialogFormVisible=false
					this.getSmallSort();
					this.addBigSortParam={
											sortGrade: "二级",
											sortStatus: null,
											sortName: null,
											sortNote: null,
											sortImg: null,
											shoppingId: null,
											defines: []
										}
				})
			},
			addDefine(){
				this.shopDefines.push({
					defineId: null,
					defineName: "正面",
					defineStatus: 0,
					sortId: -1,
					rawAddTime: null,
					rawUpdateTime: null
				})
				console.log(this.shopDefines)
			},
			delDefine(index){
				this.shopDefines.splice(index,1);
			},
			filesucess(response,file){
				this.addBigSortParam.sortImg=response.data;
				this.updateBigSortParam.sortImg=response.data;
			},
			getBigSorts(){
				this.$http.post("/pawnbackgroundsystem/sort/getBigSort",this.getBigSortParam).then(resp=>{
					console.log(resp)
					this.bigSorts=resp.data.data.ls
				})
			},
			getSmallSort(){
				this.$http.post("/pawnbackgroundsystem/sort/getSmallSort",this.getSmallSortParam).then(resp=>{
					this.smallSorts=resp.data.data.ls;
					this.currentPage=resp.data.data.indexPage
					this.manytotle=resp.data.data.totle;
				})
			},
			handleSelectionChange(val) {
				this.smallSortData=val
				console.log(this.smallSortData)
				this.multipleSelection=[]
				for(var i=0;i<val.length;i++){
					this.multipleSelection.push(val[i].sortId)
				}
			},
			handleSelectionChange1(val){
				this.singleJunior=val
				this.multipleSelection1=[];
				for(var i=0;i<val.length;i++){
					this.multipleSelection1.push(val[i].sortId)
				}
			}
			
		},
		created(){
			this.getSmallSort();
			this.getBigSorts()
		}
	}
	
</script>

<style>
</style>
